<template>
    <div class="news-list">
        <c-title text="新闻动态" :icon="require('@/assets/imgs/xinwen@2x.png')"></c-title>
        <ul>
            <li v-for="(item,index) in list" :key="index" @click="$router.push('/newsDetail/'+index)">
                <div class="thumb">
                    <img src="">
                </div>
                <h3 class="van-ellipsis">2020年招生信息发布</h3>
                <p class="van-multi-ellipsis--l3">招生简章介绍了学校的基本情况，是学生了解该学校和进行报考的重要依据，是一种…</p>
            </li>
        </ul>
        <slot></slot>
    </div>
</template>
<script>
import CTitle from "../CTitle/Index.vue";
export default {
    props:{
        number:{
            type:Number,
            default:null
        },
    },
    created(){
        if(!this.$utils.isEmpty(this.number)){
            this.list = this.list.slice(0,this.number);
        }
    },
    data(){
        return {
            list:[1,2,3,4,5,6,7,8,9]
        }
    },
    components:{
        CTitle
    }
}
</script>
<style scoped lang="less">
    .news-list{
        background-color: #fff;
        padding: 51px 20px 25px;
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                flex-basis: 223.33px;
                margin-bottom: 56px;
            }
            .thumb{
                height: 200px;
                overflow: hidden;
                border-radius: 6px;
                box-shadow: 0 0 8px 8px rgba(200, 200, 200, 0.1);
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            h3{
                font-size: 20px;
                color: @blue;
                margin: 16px 0 8px;
            }
            p{
                font-size: 16px;
                color: @gray-7;
            }
        }
    }
</style>>